<template>
  <div>
    <h1>playground</h1>
    <!--
      复习插槽
      默认插槽（匿名插槽）
      具名插槽  定制结构
      作用域插槽  本质就是给我们插槽传数据

      实现一个组件 左边的结构可以定制 右边的结构也可以定制 默认的结构
      实现一个组件 左边的结构可以定制 右边的结构也可以定制 默认的结构也可以定制
     -->
    <!-- 希望左边是123 右边是456 -->
    <slot-comp>
      <template #default="obj">
        <h1>{{ obj }}</h1>
        <h2>哈哈哈哈</h2>
      </template>
      <template #left="obj">
        <h1>{{ obj }}</h1>
        <h2>123</h2>
      </template>
      <template #right="obj">
        <h1>{{ obj }}</h1>
        <h2>456</h2>
      </template>
    </slot-comp>
    <!-- 希望左边是abc 右边是xyz -->
    <slot-comp>
      <h2>嘿嘿嘿嘿</h2>
      <template #left="obj">
        <h1>{{ obj }}</h1>
        <h2>sss</h2>
      </template>
      <template #right="{c,d}">
        <h1>{{ c }}-{{ d.y }}-{{ d.z }}</h1>
        <h2>ttt</h2>
      </template>
    </slot-comp>

  </div>
</template>

<script>
import slotComp from './components/slot-comp.vue'
export default {
  components: { slotComp }

}
</script>

<style>

</style>
